<template>
   <div class="navBar">
     <mt-navbar>
        <mt-tab-item id="item.path" v-model="selected" v-for="item in routes" :key="item.path">
           <router-link exact tag="div" :to ="{path: item.path}">{{item.title}}</router-link>
        </mt-tab-item> 
      
    </mt-navbar>
   </div>
</template>

<script>
import {routes} from '@/router'
import { Navbar, TabItem } from 'mint-ui'

export default 
{  
   data(){
     return {
        routes: routes.splice(0,4),
        selected: '/'
     }
   },
   components: {
     mtNavbar : Navbar,
     mtTabItem : TabItem 
   },
   created() {
     console.log(routes);
        this.selected = this.$route.path;
   },
}
</script>

<style>
.navBar { position: fixed; top:3.75rem; left: 2%; width:96%; z-index: 10;}
.mint-navbar .mint-tab-item { padding: 10px 0;}
.mint-navbar .mint-tab-item-label { display: block; line-height:2em; font-size: 20px; color:#333;  }
.navBar .router-link-active { border-bottom:3px #33a3f5 solid;}
</style>
